<template>
    <div>
        <div class="outmain ba_f formwidth">
            <div class="shuju_title mar_b20">
                <div class="shuju_title_text">
                    <span>饿了么设置</span>
                </div>
            </div>
            <div class="ba_f8 pad_20">
                <div class="lh25 msgtext fon_12">
                    温馨提示：目前仅支持一键获取商户的饿了么外卖订单，进行统一管理；<br>
                    1、需要先申请饿了么商家开放平台开发者账号，申请地址；<a href="https://open.shop.ele.me/openapi" target="_blank" class="color_9">https://open.shop.ele.me/openapi</a>；<br>
                    2、管理中心-创建应用-企业应用-企业应用-勾选全部应用权限-其他内容按实际填写，保存即可；<br>
                    3、需要商户已签约饿了么外卖平台。
                </div>
            </div>
            <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-form ref="form2Data" :model="form2Data" label-width="180px" class="mar_t20">
                        <el-form-item label="饿了么门店号ID" :required="true">
                            <el-input v-model="form2Data.eleStoreId" placeholder="请输入饿了么商家门店号ID"></el-input>
                            <div class="yb_margin lh16">请输入饿了么商家门店号ID</div>
                        </el-form-item>
                        <el-form-item label="授权URL" :required="true">
                            <el-button type="text" class="subjectcolor2" @click="djsq" v-show="form2Data.eleStoreId>0">点击授权</el-button>
                        </el-form-item>
                        <div class="shuju_title mar_b20">
                            <div class="shuju_title_text">
                                <span>授权信息</span>
                            </div>
                        </div>
                        <el-form-item label="授权状态" :required="true">
                            <el-tag size="medium" type="success" v-if="sqdata.storeName">已授权</el-tag>
                            <el-tag size="medium" type="info" v-else>未授权</el-tag>
                        </el-form-item>
                        <el-form-item label="授权商家名称" :required="true">
                            {{sqdata.storeName}}
                        </el-form-item>
                        <el-form-item label="授权商家地址" :required="true">
                            {{sqdata.storeAddress}}
                        </el-form-item>
                    </el-form>
            </el-tabs>
        </div>
        <div class="mar_t20 ba_f pad_20 t_c">
            <el-button type="primary" @click="onSubmit">保存</el-button>
        </div>
    </div>
</template>
<script>
    import {saveEleStoreId,eleOauth,getSaveEleStoreId,getEleStore} from "@/api/setup";
    import {mapState} from "vuex";

    export default {
        created() {
            if (this.$route.query.code) {
                this.code = this.$route.query.code
                this.init();
            }else {
                this.init();
            }
        },
        computed: {
            ...mapState(['storeId']),
        },
        data() {
            return {
                activeName: '1',
                form2Data: {
                    eleStoreId: '',
                    storeId: '',
                },
                form3:{
                    version:'',
                    describe:'',
                },
                sqdata: {},
                code:'',
            }
        },
        methods: {
            async init() {
                this.bus.$emit('loading', true);
                await this.eleOauth()
                await this.getSaveEleStoreId()
                if(this.form2Data.eleStoreId>0){
                    await this.getEleStore()
                }

            },
            async handleClick() {
                this.init()
            },
            async eleOauth() {
                const {data} = await eleOauth();
                // this.konobj = this.form
                // this.form2Data = Object.assign({}, data);
                this.bus.$emit('loading', false)
            },
            async getSaveEleStoreId() {
                const {data} = await getSaveEleStoreId({storeId:this.storeId});
                // this.konobj = this.form
                this.form2Data = Object.assign({}, data);
                this.bus.$emit('loading', false)
            },
            async getEleStore() {
                const {data} = await getEleStore({code:this.code?this.code:'',eleStoreId:this.form2Data.eleStoreId?this.form2Data.eleStoreId:''});
                this.sqdata = data
            },
            async djsq() {
                this.form2Data.storeId=this.storeId
                const {msg} = await saveEleStoreId(this.form2Data);
                this.$baseMessage(msg, "success");
                const {data} = await eleOauth();
                if(data){
                    window.open(data,'_self')
                }
            },
            async onSubmit() {
                this.$refs["form2Data"].validate(async (valid) => {
                    if (valid) {
                        this.form2Data.storeId=this.storeId
                        const {msg} = await saveEleStoreId(this.form2Data);
                        this.$baseMessage(msg, "success");
                        this.init();
                    } else {
                        return false;
                    }
                });
            },
        }
    }
</script>
